<template>
  <UiCodemirror
    v-if="initiated"
    :key="editorKey"
    :view-options="{ root: appProvider.shadowRoot }"
    :model-value="customCSS"
    placeholder="code here..."
    class="min-h-40"
    max-height="60vh"
    :extensions="editorExtensions"
    :theme-options="{
      settings: {
        background: 'transparent',
        gutterBackground: 'transparent',
      },
    }"
    @change="updateCSS"
  />
</template>
<script setup lang="ts">
import { shallowRef, ref, onMounted } from 'vue';
import { EL_IDS } from '@src/utils/constant';
import { html } from '@codemirror/lang-html';
import { lineNumbers } from '@codemirror/view';
import type { Extension } from '@codemirror/state';
import UiCodemirror from '@root/src/pages/components/ui/UiCodemirror.vue';
import { css } from '@codemirror/lang-css';
import { useAppProvider } from '../../content/ui/app-plugin';
import { getItem, setItem } from '@root/src/utils/helper';

const editorExtensions: Extension[] = [html(), lineNumbers()];
let editorKey = shallowRef(0);
const appProvider = useAppProvider();

const customCSS = ref('');
const initiated = shallowRef(false);

function updateCSS(value: string) {
  customCSS.value = value;
  setItem('kkNote', value);
}

onMounted(() => {
  initiated.value = true;
  getItem('kkNote').then((result: string) => {
    console.log('result: ', result);
    editorKey.value += 1;
    if (result) {
      customCSS.value = result;
    } else {
      customCSS.value = `你的人设\n年龄:x岁\n性别:男\n邮编:xxx\n学历:xx\n`;
    }
  });
});
</script>
